<template>
  <el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  :width="width"
  @close="handleClose">
  
  <!-- 主题区域 -->
  <slot name="main">
    我是主题内容
  </slot>

  <!-- 按钮区域 -->
  <span slot="footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="checkFun">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false, // 控制dialog打开关闭
    }
  },
  props: {
    title: {
      type: String,
      default: '标题'
    },
    width: {
      type: String,
      default: '30%'
    },
    emitName: { // 子传父传递事件名
      type: String
    },
    checkName: { // 确定按钮点击后检查函数子传父的名称
      type: String
    }
  },
  methods: {
    handleClose() { // 关闭Diaog组件发送父组件
      if (!this.emitName) {
        return this.dialogVisible = false;
      } 
        this.$emit(this.emitName); // 向父组件发送事件
    },
    openDialog(flag) { // 打得开dialog组件
    console.log('开启dialog', flag);
      this.dialogVisible = flag;
    },
    checkFun() { // 确定按钮检查函数
      if (!this.checkName) {
        return this.dialogVisible = false; 
      }
      this.$emit(this.checkName);
    }
  },
  created() {
    // console.log('子组件创建成功');
    this.$bus.$on('openMyDialog', (flag) => this.openDialog(flag));  //添加用户信息
    this.$bus.$on('openDialogUpdateUserInfo', (flag) => this.openDialog(flag)); // 更新用户信息
  },
  destroyed() {
    this.$bus.$off('openMyDialog');
    this.$bus.$off('openDialogUpdateUserInfo');
  }
}
</script>

<style lang="scss" scoped>

</style>